<template>
  <div class="menu" @click="$store.commit('common/set_showLittlePopup')">
    <ul class="clearfix">
      <li class="fl">
        <img class="cp" src="@/assets/message/selectPicture.png" alt ondragstart="return false" @click.stop="submitImage"/>
      </li>
      <li class="fl">
        <img class="cp" src="@/assets/message/selectFile.png" alt ondragstart="return false" @click.stop="showFilePopup" v-if="!(!contactInfo.in_contact && current_contact.id_type === 1)"/>
      </li>
      <li class="fl">
        <img class="cp" src="@/assets/message/videoCall.png" alt ondragstart="return false"  v-if="!(!contactInfo.in_contact && current_contact.id_type === 1)" @click="videoCall"/>
      </li>
    </ul>
    <fileUpload></fileUpload>
    <add-group-dialog ref="addGroupMember"></add-group-dialog>
  </div>
</template>

<script>
import fileUpload from './fileUpload'
import addGroupDialog from '@/components/searchBox/components/addGroupDialog'
import { sendSock } from '@/utils/socketSend'
export default {
  data () {
    return {
      picMessage: null
    }
  },
  components: {
    fileUpload, addGroupDialog
  },
  computed: {
    // 当前联系人
    current_contact () {
      return this.$store.state.chatInformation.current_contact
    },
    // 当前联系人信息
    contactInfo () {
      return this.tools.getContactInfo(this.current_contact.id, this.current_contact.id_type)
    }
  },
  methods: {
    // 上传图片
    submitImage () {
      this.tools.createInputFile(null, 'image/x-png,image/gif,image/jpeg,image/bmp', true).then(res => {
        const imgData = res.data.data
        imgData.forEach((item, index) => {
          const picMessage = {
            type: 'pic',
            isSelf: true,
            avatarImg: this.$store.state.user.userInfo.user_img,
            imgSrc: res.files[index]
          }
          const img = new Image()

          const imgId = item.file_id
          img.src = res.files[index]
          if (img.complete) {
            // 如果图片被缓存，则直接返回缓存数据
            this.sendPic(img, imgId, picMessage)
          } else {
            img.onload = () => {
              this.sendPic(img, imgId, picMessage)
            }
          }
        })
      })
    },
    async sendPic (img, imgId, picMessage) { // 发送图片
      const imgWidth = img.width
      const imgHeight = img.height
      const body = {
        id: this.current_contact.id,
        timestamp: +new Date(),
        img_id: imgId,
        img_width: imgWidth,
        img_height: imgHeight
      }
      sendSock({
        type: this.current_contact.id_type === 1 ? '2.2.5' : '3.2.5',
        body
      })
      this.$store.commit('socket/set_operationReqId', 'sendMessageId')
      picMessage.img_width = imgWidth
      picMessage.img_height = imgHeight
      await this.$store.dispatch('chatInformation/setAddMessage', { message: picMessage, id: this.current_contact.id, idType: this.current_contact.id_type })
    },
    // 展示上传文件弹框
    showFilePopup () {
      this.$store.commit('common/set_showLittlePopup_chatSubmitFilePopup')
    },
    // 发起视频通话
    videoCall () {
      // 私聊
      if (this.current_contact.id_type === 1) {
        // 当前未进行发起通话
        if (!this.$store.state.common.ifShowVideoInvitation) {
          sendSock({
            type: '2.1.1',
            body: {
              id_type: 2, // 此处应是call_type，借用id_type的规则
              id: this.current_contact.id,
              timestamp: +new Date()
            }
          })
          // 设置消息reqID
          this.$store.commit('socket/set_operationReqId', 'sendCallReqId')
        }
      } else if (this.current_contact.id_type === 2) {
        this.$store.commit('groups/set_selectedList', [])
        this.$store.commit('groups/set_addType', 5)
        this.$refs.addGroupMember.toggleShow()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.menu {
  height: 40px;
  position: relative;
  z-index: 99;
  padding: 9px 24px;
  ul {
    li {
      margin-right: 20px;
      img {
        width: 24px;
        height: 24px;
        vertical-align: middle;
      }
    }
  }
  .fileUpload {
    position: absolute;
    top: -82px;
    left: 16px;
  }
}
</style>
